import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// 导入路由
import router from './router'
let app = createApp(App)
// vue2 全局自定义指令 
// Vue.directive('focus', {
//   bind () { },
//   inserted (el, binding) { },
//   update () { },
//   compoentUpdate () { },
//   unbind () { }
// })

// vue3 全局自定义指令
app.directive('myshow', {
  created () { },
  beforeMount () { },
  mounted (el, binding) { //指令挂载后
    // el---当前挂载指令的元素
    // binding.value---指令后的值
    if (binding.value) {
      el.style.display = 'block'
    } else {
      el.style.display = 'none'
    }
  },
  beforeUpdate () { },
  updated (el, binding) { //指令后的值更新后
    if (binding.value) {
      el.style.display = 'block'
    } else {
      el.style.display = 'none'
    }
  },
  unmounted () { },
})
// 是否允许复制指令
app.directive('copy', {
  beforeMount (el, binding) {
    //binding.value 代表需要复制的文字
    el.targetContent = binding.value;
    el.addEventListener('click', () => {
      if (!el.targetContent) return console.warn('没有需要复制的目标内容');
      // 创建textarea标签
      const textarea = document.createElement('textarea');
      // 设置相关属性
      textarea.readOnly = 'readonly';
      textarea.style.position = 'fixed';
      textarea.style.top = '-99999px';
      // 把目标内容赋值给它的value属性
      textarea.value = el.targetContent;
      // 插入到页面
      document.body.appendChild(textarea);
      // 调用onselect()方法
      textarea.select();
      // 把目标内容复制进剪贴板, 该API会返回一个Boolean
      const res = document.execCommand('Copy');
      res && console.log('复制成功，剪贴板内容：' + el.targetContent);
      // 移除textarea标签
      document.body.removeChild(textarea);
    })
  },
  updated (el, binding) {
    // 实时更新最新的目标内容
    el.targetContent = binding.value;
  },
  unmounted (el) {
    el.removeEventListener('click', () => { })
  }
})


// 使用路由
app.use(router);
app.mount('#app');